<template>
  <div class="dashboard-container">
    <div class="dashboard-text">昵称:{{ name }}</div>
    <div class="dashboard-text">角色:<span v-for="role in roles" :key="role">{{ role }}</span></div>
    <div>
      <el-radio-group v-model="userType" @change="init">
        <el-radio-button label="1">今日</el-radio-button>
        <el-radio-button label="2">昨日</el-radio-button>
        <el-radio-button label="3">七日内</el-radio-button>
        <el-radio-button label="4">三十日内</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="type" style="margin-left: 400px" @change="init">
        <el-radio-button label="bar">柱状</el-radio-button>
        <el-radio-button label="line">折线</el-radio-button>
      </el-radio-group>
    </div>
    <div id="userDemo" style="width: 900px; height: 300px"/>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import count from '../../api/count'

export default {
  name: 'Dashboard',
  data() {
    return {
      userType: 1,
      xList: [],
      yList: [],
      type: 'bar'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    this.init()
  },
  methods: {
    echarts01() {
      const chartDom = document.getElementById('userDemo')
      const myChart = this.$echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '注册用户',
            data: this.yList,
            type: this.type,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    init() {
      count.getCountUser(this.userType).then(response => {
        this.xList = response.data.xList
        this.yList = response.data.yList
        this.echarts01()
      })
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
